import React, { useState, useEffect } from 'react'
import Header from '../components/Header';
import Footer from '../components/Footer'
import Carousel from '../components/Carousel';
import BreadCrumb from '../components/BreadCrumb';
import api from '../config';
import { formateDate } from '../util';
import { Link } from 'react-router-dom'
import Pagination from '../components/Pagination'
export default function News() {
  // 服务器端数据分页器
  let [pager, setPager] = useState({
    data:[]
  })
  function loadData(pno) {
    let url = api.newsSelect + '?pageNum=' + pno
    console.log(url);

    fetch(url).then(res => {
      return res.json()
    }).then(body => {
      console.log(body);
      setPager(body)
    }).catch(err => {
      console.log(err);
    })
  }
  // 页面挂载完成 请求第一页数据
  useEffect(() => {
    loadData(1)
  }, [])
  let breadCrumbData = [
    { path: "/", name: '首页' },
    { path: '#', name: '公司动态' }
  ]
  return (
    <div>
      {/* F1 页头 */}
      <Header></Header>
      {/* F2 面包屑 */}
      <BreadCrumb data={breadCrumbData}></BreadCrumb>
      {/* F3 主体 */}
      <div className="main container">
        <div className="news">
          <ul>
            {
              pager.data.map((item,i)=>(
                <li key={i}>
                  <span>{formateDate(item.pubTime,'short')}</span>
                  <Link to={`/news_details?nid=${item.nid}`}>{item.title}</Link>
                </li>
              ))
            }
          </ul>
        </div>
        {/* 分页导航*/}
        <Pagination pager={pager} jump={loadData}></Pagination>
      </div>
      {/* F4 页尾 */}
      <Footer></Footer>
    </div>
  )
}
